<template>
	<div class="service-dialog">
    <van-popup
      v-model="dialogVisible"
      class="service-pop"
      position="bottom"
      :style="{ height: '50vh'}"
    >
    <div class="service-wrap">
      <div class="service-wrap-close" @click="closeDialog">
        <span class="img-close"></span>
      </div>
      <div class="service-wrap-top">服务承诺</div>
      <ul class="service-wrap-con">
        <li v-for="(item,index) in serviceData" :key="index" class="service-li">
          <div class="img-box">
            <img :src="item.img" v-if="item.img" />
            <img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_promise.png" v-else/>
          </div>
          <div class="txt-box">
            <div class="title">{{item.name}}</div>
            <div class="txt">{{item.description}}</div>
          </div>
        </li>
      </ul>
    </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      serviceData: {
        type: Array
      }
    },
    data() {
      return {
        dialogVisible: false
      }
    },
    mounted() {
      this.dialogVisible = this.visible
    },
    watch: {
      dialogVisible(val) {
        this.$emit('update:visible', val)
      },
      visible(val) {
        this.dialogVisible = val
      }
    },
    methods: {
      // 点击关闭按钮
      closeDialog() {
        this.dialogVisible = false
      }
    }
  })
</script>

<style  lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  @import "src/styles/user/coupons/index.scss";
  .service-dialog{
    background: #fff;
    position: relative;
    .service-pop{
      overflow:hidden;
      border-radius:20px 20px 0 0;
    }
    .service-wrap{
      .service-wrap-close{
        position:absolute;
        right:30px;
        top:34px;
        .icon-close{
          font-size:32px;
          color:#999;
        }
        .img-close{
          display: inline-block;
          width: 28px;
          height: 28px;
          background: url(https://img.wifenxiao.com/h5-wfx/images/common/close-icon.png) no-repeat center;
          background-size: 100% 100%;
        }
      }
      &-top{
        padding: 30px 0;
        border-bottom:2px solid #EDEDED;
        text-align: center;
        font-size: 32px;
        font-weight:bold;
        color: #333;
      }
      .service-wrap-con{
        padding:30px;
        height: calc(50vh - 100px);
        overflow: auto;
        .service-li{
          display:flex;
          margin-bottom:49px;
          &:last-child{
            margin-bottom:0;
          }
          .img-box{
            overflow:hidden;
            width:30px;
            height:30px;
            margin-right:14px;
            margin-top: 6px;
            img{
              display:block;
              width:100%;
            }
          }
          .txt-box{
            flex:1;
            word-break:break-all;
            .title{
              font-size:28px;
              line-height:1.4;
              color:#333;
              font-weight: 500;
              margin-bottom: 15px;
            }
            .txt{
              font-size:22px;
              color:#666;
            }
          }
        }
      }
      .service-wrap-bottom{
        position: absolute;
        width: 100%;
        padding: 10px 24px;
        left:0;
        bottom: 0;
        border-top:2px solid #EDEDED;
        .btn{
          padding: 24px 0;
          font-size: 30px;
          line-height: 30px;
          font-weight: 500;
          color: #f5f5f5;
          border-radius: 60px;
          text-align: center;
        }
      }
    }
  }
</style>
